<template>
  <div class="income_tax">

    <div class="form-bar">
      <el-form :inline="true">
        <el-form-item>
          <tool-bar :add-batch-data="addBatchData"></tool-bar>
        </el-form-item>
        <el-form-item label="申报年月">
          <el-date-picker size="small"
              v-model="form.archivesDate"
              type="month"
              placeholder="选择月" clearable @change="getDataList"
                          :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" size="small" clearable @blur="getDataList"></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="form.cid" size="small" clearable @blur="getDataList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList" size="small" type="primary">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
        top="15vh"
        :visible.sync="dialogVisibleUpload"
        width="50%"
        title="个税申报原始数据批量导入"
        :before-close="handleClose"
        center>
      <div style="text-align: center!important;margin-bottom: 1rem;">
        <el-form :inline="true">
          <el-form-item label="申报年月">
            <el-date-picker
                value-format="yyyy-MM-01"
                v-model="archivesDate"
                type="month"
                placeholder="选择月" clearable>
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <el-upload
          :disabled="archivesDate===null"
          class="upload-demo"
          drag
          :http-request="uploadArchives"
          auto-upload
          accept=".xlsx,.xls"
          multiple action="#" style="text-align: center!important;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传1个.xls/.xlsx文件</div>
        <!--        <el-link type="success" href="https://47.109.16.23:28361/down/GURX6ipYziXs.xlsx" style="margin-top: 1rem">点击下载社保上传模板</el-link>-->
      </el-upload>
    </el-dialog>
    <div class="content">
      <el-table
          :data="tableData"
          border
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">
        <el-table-column label="申报年月" width="120" fixed="left">
          <template slot-scope="scope">
            {{ scope.row.archivesDate|formatDateBirth }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="name" fixed="left"></el-table-column>
        <el-table-column label="工号" prop="jobNo" fixed="left" width="100"></el-table-column>
        <el-table-column label="证件类型" prop="documentType" min-width="120" fixed="left"></el-table-column>
        <el-table-column label="证件号码" prop="cid" min-width="180" fixed="left"></el-table-column>
        <el-table-column label="本月次情况" prop="">
          <el-table-column label="收入额计算" prop="">
            <el-table-column label="收入" prop="income"></el-table-column>
            <el-table-column label="费用" prop="fee"></el-table-column>
            <el-table-column label="免税收入" prop="taxExemptIncome" width="100"></el-table-column>
          </el-table-column>
          <el-table-column label="减除费用" prop="deductionOfExpenses"  width="100"></el-table-column>
          <el-table-column label="专项扣除" prop="">
            <el-table-column label="基本养老保险费" prop="basicPensionInsurance" min-width="140"></el-table-column>
            <el-table-column label="基本医疗保险费" prop="basicMedicalInsurance" min-width="140"></el-table-column>
            <el-table-column label="失业保险费" prop="unemploymentInsurance" min-width="100"></el-table-column>
            <el-table-column label="住房公积金" prop="housingFund" min-width="100"></el-table-column>
          </el-table-column>
          <el-table-column label="其他扣除" prop="">
            <el-table-column label="年金" prop="annuity"></el-table-column>
            <el-table-column label="商业健康保险" prop="commercialHealthInsurance" min-width="120"></el-table-column>
            <el-table-column label="税延养老保险" prop="taxDeferredPensionInsurance" min-width="120"></el-table-column>
            <el-table-column label="财产原值" prop="originalValueOfProperty" width="100"></el-table-column>
            <el-table-column label="允许扣除的税费" prop="allowDeductionOfTaxesFees" min-width="120"></el-table-column>
            <el-table-column label="其他" prop="other"></el-table-column>
          </el-table-column>
        </el-table-column>


        <el-table-column label="累计情况" prop="">
          <el-table-column label="累计收入额" prop="accumulatedIncome" min-width="100"></el-table-column>
          <el-table-column label="累计减除费用" prop="accumulatedDeductionOfExpenses" min-width="120"></el-table-column>
          <el-table-column label="累计专项扣除" prop="accumulatedSpecialDeductions" min-width="120"></el-table-column>
          <el-table-column label="累计专项扣除附加扣除" prop="">
            <el-table-column label="子女教育" prop="childrenEducation" width="100"></el-table-column>
            <el-table-column label="赡养老人" prop="supportingElderly" width="100"></el-table-column>
            <el-table-column label="住房贷款利息" prop="housingLoanInterest" min-width="120"></el-table-column>
            <el-table-column label="住房租金" prop="housingRent" width="100"></el-table-column>
            <el-table-column label="继续教育" prop="continuingEducation" width="100"></el-table-column>
            <el-table-column label="3岁以下婴幼儿照护" prop="careThreeYearsOldChildren"
                             min-width="150"></el-table-column>
          </el-table-column>
          <el-table-column label="累计个人养老金" prop="accumulatedPersonalPension" min-width="120">
          </el-table-column>
          <el-table-column label="累计其他扣除" prop="accumulatedOtherDeductions" min-width="120">
          </el-table-column>

        </el-table-column>
        <el-table-column label="减按计税比例" prop="taxDeductionRatio" min-width="120">
        </el-table-column>
        <el-table-column label="准予扣除的捐赠额" prop="donationTaxAllowedDeduction" min-width="150">
        </el-table-column>
        <el-table-column label="税款计算" prop="">
          <el-table-column label="应纳税所得额" prop="taxableIncome" min-width="120">
          </el-table-column>
          <el-table-column label="税率/预扣率" prop="taxRate" min-width="120">
          </el-table-column>
          <el-table-column label="速算扣除数" prop="quickCalculationDeduction" min-width="120">
          </el-table-column>
          <el-table-column label="应纳税额" prop="taxableAmount">
          </el-table-column>
          <el-table-column label="减免税额" prop="taxSaving">
          </el-table-column>
          <el-table-column label="已缴纳税额" prop="paidTaxAmount" min-width="120">
          </el-table-column>
          <el-table-column label="应补/退税额" prop="shouldSupplemented" min-width="120">
          </el-table-column>
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="100" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            hide-on-single-page
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[12]"
            :page-size=size
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" append-to-body center>
      <div slot="title">
        <h3>提示</h3>
        <h5>上传文件中：
          <el-tag type="info" v-text="allNum"></el-tag>
          条数据，成功导入
          <el-tag type="success" v-text="successNum"></el-tag>
          条数据，失败导入：
          <el-tag type="danger" v-text="errorNum"></el-tag>
          条数据<span v-if="errorNum>0">，错误信息如下：</span></h5>
      </div>
      <el-row>
        <ol v-if="list.length>0" style="text-align: center;height:35vh;overflow-y: scroll;">
          <li v-for="(item,index) in list" style="text-align: left;">
            <span v-text="item" style="width: 350px;overflow: hidden;text-overflow: ellipsis"></span></li>
        </ol>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";
import moment from "moment";

export default {
  name: "SysIncomeTax",
  components: {ToolBar},
  data() {
    return {
      dialogVisible: false,
      list: [],
      allNum: 0,
      successNum: 0,
      errorNum: 0,
      currentPage: 1,
      total: 0,
      size: 12,
      tableData: [],
      dialogVisibleUpload: false,
      form: {
        // archivesDate: moment("2023-10-01").format("YYYY-MM-DD")
        archivesDate: moment().format("YYYY-MM-01")
      },
      archivesDate: null,
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    handleClose(done) {
      console.log("Donw:", done)
      this.$confirm('确认关闭？')
          .then(_ => {
            this.form = {}
            this.dialogFormVisible = false
            done();
          })
          .catch(_ => {
          });
    },
    getDataList() {
      this.dialogFormVisible = false
      console.log("查询数据：", this.form)
      axios.post("/income_tax/list/page/" + this.currentPage + "/" + this.size, this.form).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        } else {
          this.tableData = []
          this.total = 0
          this.pages = 1

        }

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    addBatchData() {
      console.log("批量添加")
      this.dialogVisibleUpload = true
    },
    uploadArchives(res) {
      console.log(res)
      let formData = new FormData();
      formData.append("file", res.file)
      axios({
        method: "POST",
        url: "/income_tax/addBatch/" + this.$store.state.userInfo.id + "/" + moment(this.archivesDate).format("YYYY-MM-DD"),
        headers: {
          'content-type': 'multipart/form-data',
        },
        data: formData
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          let successNum = parseInt(res.data.data.successNum);
          let errorNum = parseInt(res.data.data.errorNum);
          let allNum = successNum + errorNum
          if (errorNum > 0) {
            let list = res.data.data.list
            this.successNum = successNum;
            this.errorNum = errorNum
            this.allNum = allNum;
            this.list = list
            this.dialogVisible = true
          } else {
            this.dialogVisibleUpload = false
            this.getDataList()
            this.$message({
              dangerouslyUseHTMLString: true,
              message: "成功上传<b>" + allNum + "</b>条数据",
              type: "success"
            })
          }
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.data.message,
            type: "error"
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
